<template>
    <div class="btn-view">
        <div class="btn-left" :class="{ active: isActive == 0 }" @click="handleToggleChange(0)">{{leftTxt}}</div>
        <div class="btn-right" :class="{ active: isActive == 1 }" @click="handleToggleChange(1)">{{rightTxt}}</div>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                isActive: 0
            }
        },
        methods: {
            handleToggleChange(val) {
                if(val != this.isActive) {
                    switch ( this.isActive ){
                        case 0 :
                            this.isActive = 1;
                            break;
                        case 1 :
                            this.isActive = 0;
                            break;
                    }
                    this.$parent['handleToggleChange'](this.isActive );
                }
            }
        },
        props: {
            'leftTxt' : {
                default: ''
            },
            'rightTxt' : {
                default: ''
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "../assets/css/base/color.scss";
    .btn-view {
        display: inline-block;
        background-color: $btn-background;
        border-radius: 25px;
        color: $btnView;
        text-align: center;
        .btn-left , .btn-right {
            float: left;
            cursor: pointer;
            padding: 5px 20px;
            margin: 3px;
        }
        .active {
            background-color: $white;
            border-radius: 25px;
        }
    }

</style>